<template>
  <view
    ref="floatService"
    class="float-service" 
    :style="transformStyle"
    @touchstart="start"
    @touchmove="move"
    @touchend="end"
  >
  <!-- 
    @touchstart="start"
    @touchmove="move"
    @touchend="end" -->
    <button class="float-service-btn" open-type="contact">
      <image class="img" src="/static/service_float_icon.png"></image>
    </button>
  </view>
</template>

<script>
	export default {
    props: ['top'],
		data() {
			return {
        startData: {
          x: 0,
          y: 0
        },
        isMoving: false,
        tempY: 0,
        touch: {},
			};
		},
    computed: {
      transformStyle() {
        // return 
        return this.top ? `top: ${this.top};` : `transform: translateY(${this.isMoving ? this.tempY : this.moveY}px)`
      },
      moveY() {
        return this.$store.state.app.serviceMoveY
      }
    },
    methods: {
      start(e) {
        this.startData.y = e.changedTouches[0].clientY
        this.isMoving = true
      },
      end(e) {
        let moveY = this.touch.clientY - this.startData.y + this.moveY
        this.$store.dispatch('setServiceMoveY', moveY)
        this.isMoving = false
      },
      move(event) {
        let touch = event.touches[0]
        this.touch = touch;
        this.tempY = touch.clientY - this.startData.y + this.moveY
      }
    }
	}
</script>

<style lang="scss">
.float-service {
  position: fixed;
  top: 35%;
  right: 0;
  width: 116rpx;
  height: 84rpx;
  z-index: 18;
  background: none;
  .float-service-btn {
    width: 100%;
    height: 100%;
    background: none;
    border-radius: 0;
    padding: 0;
  }
  .img {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}
</style>
